<template>
  <view class="container">
    <!-- 关注商家列表 -->
    <view class="shop-list">
      <view class="shop-item" v-for="(shop, index) in followedShops" :key="index">
        <image class="shop-logo" :src="Config.API_HOST + shop.imgUrl" mode="aspectFill"></image>
        <view class="shop-info">
          <text class="shop-name">{{ shop.name }}</text>
          <view class="stats-container">
            <text class="stat-item">月售{{ shop.sales }}</text>
            <text class="stat-item">起送¥{{ shop.expressLimit }}</text>
            <text class="stat-item">运费¥{{ shop.expressPrice }}</text>
          </view>
          <text class="slogan">{{ shop.slogan }}</text>
        </view>
        <button class="unfollow-btn" @click="unfollow(shop.id, index)">取消关注</button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import Config from '@/config.js';

// 关注商家列表
const followedShops = ref([]);

// 获取关注商家数据
const fetchFollowedShops = () => {
  uni.request({
    url: `${Config.API_HOST}/attention/?checked=true&token=${uni.getStorageSync('token')}`,
    success: (res) => {
      followedShops.value = res.data;
    },
    fail: (error) => {
      console.error('获取关注商家失败:', error);
    }
  });
};

// 取消关注
const unfollow = (id) => {
  uni.request({
    url: `${Config.API_HOST}/hotList/${id}`,
    method: 'PATCH',
    data: {
      checked: false
    },
    success: () => {
        fetchFollowedShops()
    },
    fail: (error) => {
      console.error('取消关注失败:', error);
    }
  });
  uni.request({
    url: `${Config.API_HOST}/attention/${id}`,
    method: 'DELETE',
    data: {
      checked: false
    },
    success: () => {
        fetchFollowedShops()
        uni.showToast({
            title: '取消关注成功',
            icon: 'success'
        });
    },
    fail: (error) => {
      uni.showToast({
        title: '取消关注失败',
        icon: 'none'
      });
    }
  });
};

// 页面加载时获取数据
onMounted(() => {
  fetchFollowedShops();
});
</script>

<style scoped>
.container {
  padding: 20rpx;
}

.shop-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.shop-item {
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 20rpx;
  border-radius: 12rpx;
  position: relative;
}

.shop-logo {
  width: 120rpx;
  height: 120rpx;
  border-radius: 10rpx;
  margin-right: 20rpx;
}

.shop-info {
  flex: 1;
}

.shop-name {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.stats-container {
  display: flex;
  gap: 15rpx;
  margin-bottom: 10rpx;
}

.stat-item {
  font-size: 24rpx;
  color: #666;
}

.slogan {
  font-size: 24rpx;
  color: #e93b3b;
}

.unfollow-btn {
  position: absolute;
  right: 20rpx;
  bottom: 20rpx;
  background-color: #e93b3b;
  color: white;
  border: none;
  border-radius: 8rpx;
  padding: 10rpx 20rpx;
  font-size: 24rpx;
}
</style>